<template>
  <Card>
    <p slot="title">
      <Icon type="ios-settings"/>
      系统设置
    </p>
    <div class="main-content">
      <h4>
        累计图片：
      </h4>
      <div class="item">
        <Icon type="ios-folder"/>
        <span class="title">本地磁盘：</span>
        <Tag color="green">{{dirSize}}</Tag>
      </div>

      <div class="item">
        <Icon type="ios-analytics"/>
        <span class="title">数 据 库：</span>
        <Tag color="green">{{databaseSize}}</Tag>
      </div>

      <br/>
      <h4>
        配置信息：
      </h4>

      <div class="item">
        <Icon type="link"></Icon>
        <span class="title">图片路径前缀：</span>
        <Tag color="green">{{url}}</Tag>
      </div>

      <div class="item">
        <Icon type="image"></Icon>
        <span class="title">本地存储文件路径：</span>
        <Tag color="green">{{dir}}</Tag>
      </div>

      <br/>
      <Button type="primary" icon="checkmark-round" :loading="loading" @click="clearClick">
        <span v-if="!loading">清理系统无用文件</span>
        <span v-else>清理中...</span>
      </Button>

      <Button type="error" :loading="loading2" @click="modal = true">清空所有缓存</Button>
    </div>


    <Modal v-model="modal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>清空操作</span>
      </p>
      <div style="text-align:center">
        <p>您正在操作清空缓存数据库的所有数据！</p>
        <p>您确定要这么做吗?</p>
      </div>
      <div slot="footer" align="center">
        <Button type="error" size="large" @click="clearCacheClick();modal = false">清空</Button>
        <Button type="success" size="large" @click="modal = false">取消</Button>
      </div>
    </Modal>

  </Card>
</template>

<script>
  export default {
    name: "Setting",
    data() {
      return {
        loading: false,
        loading2: false,
        databaseSize: 0,
        dirSize: 0,
        url: '',
        dir: '',
        modal: false
      }
    },
    created() {
      this.requestApi();
    },
    methods: {
      clearClick() {
        this.loading = true;
        this.http.post("/auto-delete-file", null, success => {
          this.$Message.success("清理成功");
          this.requestApi();
          this.loading = false;
        }, error => {
          this.$Message.error(error);
          this.loading = false;
        })
      },
      requestApi() {
        let self = this;
        this.http.get('/auto-system-status', null, success => {
          self.databaseSize = success.databaseSize;
          self.dirSize = success.dirSize;
          self.url = success.url;
          self.dir = success.dir;
        }, error => {
          this.$Message.error(error);
        })
      },
      clearCacheClick() {
        this.loading2=true;
        this.http.post("/auto-system-clearCache", null, success => {
          this.$Message.success("缓存已清空");
          this.loading2 = false;
        }, error => {
          this.$Message.error(error);
          this.loading2 = false;
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .main-content
    .item
      margin-left: 20px
      margin-top: 5px
      .title
        color: #2b85e4
        font-size: 15px
</style>
